<!--  -->
<template>
  <div class="shop-info">
      <div class="name">
        <img :src="shop.shopLogo" alt="" class="shop-logo">
        <span>{{shop.name}}</span>
      </div>
      <div class="info">
        <div class=" total">
          <div class="item">
            <div>{{shop.cSells | filterW}}</div>
            <div>总销量</div>
          </div>
          <div class="item">
            <div>{{shop.cGoods}}</div>
            <div>全部宝贝</div>
          </div>
        </div>
        <div class=" score">
          <p v-for="(item,index) in shop.score" :key="index" :class="{hight:item.isBetter}">
            <span>{{item.name}}</span>
            <span>{{item.score}}</span>
            <span>{{item.isBetter?'高':'低'}}</span>
          </p>
        </div>
    
      </div>
  </div>
</template>

<script>
export default {
  name: 'ShopInfo',
  props:{
    shop:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  data () {
    return {
    };
  },

  components: {},

  computed: {},

  methods: {},
  filters:{
    filterW(val){
      return val > 10000 ? (val / 10000).toFixed(1) + '万' : val
    }
  },

  created(){},
}

</script>
<style lang='scss' scoped>
.shop-info{
  padding:15px;
  .name{
    display: flex;
    align-items: center;
  .shop-logo{
    width:60px;
    height:60px;
    border-radius: 50%;
    border:1px solid var(--color-text);
    padding:5px;
    margin-right:15px;
  }
}
.info{
  display: flex;
  align-items: center;
  .total{
    flex:1;
    display: flex;
    justify-content:center;
    text-align: center;
    .item +.item{
      margin-left:20px;
    }
  }
  .score{
    flex:1;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    &>p:nth-of-type(2){
      padding:10px 0;
   
    }
    span + span{
      margin:0 3px;
    }
    span:nth-of-type(2){
     width:30px;
     text-align: center;
     display: inline-block;
    }
    span:nth-of-type(3){
      background:green;
      color:#fff;
      padding:3px;
      font-size: 0.8rem;
      border-radius: 4px;
    }
  }
}
.hight{
  span:nth-of-type(2){
    color:var(--color-tint);
  }
  span:nth-of-type(3){
    background:var( --color-tint) !important;
  }
}
}

</style>